<template>
    <div class="addNewLocation">
      <section class="main-wrapper mrtop">
        <label for="consignee" class="item">
          <span class="left le-space">收货人</span>
          <input type="text" id="consignee" v-model="consignee" class="right" placeholder="请输入收货人姓名"/>
        </label>
        <label for="phone" class="item">
          <span class="left">联系电话</span>
          <input type="text" id="phone" v-model="phone" class="right" placeholder="配送人员联系您的电话"/>
        </label>
        <label class="item">
          <span class="left">选择城市</span>
          <p><span>广州市</span><em style="color: #c2c2c2">></em></p>
          <!--<input type="text" id="city" v-model="city" class="right" placeholder="请输入收货人姓名"/>-->
        </label>
      </section>
      <div class="divider">收货具体地址</div>
      <section class="main-wrapper">
        <label class="item">
          <span class="left">收货地址</span>
          <p @click="gotoSelect"><i class="icon"><img src="../../../../static/img/location_gray.png"/></i><span>{{receptionAddress}}</span><em style="color: #c2c2c2">></em></p>
          <!--<input type="text" id="receptionAddress" v-model="receptionAddress" class="right" placeholder="配送人员联系您的电话"/>-->
        </label>
        <label for="detailAddress" class="item">
          <span class="left">详细地址</span>
          <input type="text" id="detailAddress" v-model="detailAddress" class="right" placeholder="楼层和门牌号"/>
        </label>
      </section>
      <div class="btn-box">
        <p class="btn" @click="addLocation">保存并使用</p>
      </div>
      <transition name="select">
        <router-view></router-view>
      </transition>
    </div>
</template>

<script>
    import SelectLocation from "./selectLocation";

    export default {
      components: {SelectLocation},
      name: "add-new-location",
      data () {
        return {
          consignee: '',
          phone: '',
          city: '',
          receptionAddress: '',
          detailAddress: '',
          show: false
        }
      },
      mounted () {
        this.setReceptionAddress()
      },
      methods: {
        addLocation () {
          let newLocation = {}
          newLocation['consignee'] = this.consignee
          newLocation['phone'] = this.phone
          newLocation['city'] = this.city
          newLocation['receptionAddress'] = this.receptionAddress
          newLocation['detailAddress'] = this.detailAddress
          console.log(newLocation)
        },
        gotoSelect () {
          this.show = true
          this.$router.push('/location/addNewLocation/selectLocation')
        },
        setReceptionAddress () {
          let loc = window.localStorage.getItem('receptionAddress')
          if (!loc) {
            this.receptionAddress = '请选择小区、大厦'
          }
          this.receptionAddress = loc
        }
      },
      watch: {
        '$route': 'setReceptionAddress'
      }
    }
</script>

<style scoped lang="scss">
  @import "../../../common/sass/mixin";
  .addNewLocation{
    background-color: $bc;
    position: absolute;
    z-index: 100;
    top: 90px;
    bottom: 0;
    left: 0;
    right: 0;
    .mrtop{
      margin-top: 30px;
    }
    .main-wrapper{
      background-color: #ffffff;
      padding: 0 18px;
      @include font-dpr(28px);
      line-height: 80px;
      .item{
        display: flex;
        border-bottom: 1px solid $borderCor;
        .left{
          color: #666666;
        }
        .le-space{
          letter-spacing: 4px;/*no*/
        }
        p{
          display: flex;
          flex: 1;
          align-items: center;
          padding: 0 30px;
          .icon{
            margin-right: 5px;
            img{
              height: 40px;
              width: 40px;
              vertical-align: middle;
            }
          }
          span{
            flex: 1;
          }
        }
        .right{
          flex: 1;
          color: #666666;
          border: none;
          outline: none;
          padding: 0 30px;
          @include placeholderStyle;
        }
        &:last-child{
          border: none;
        }
      }
    }
    .divider{
      line-height: 80px;
      @include font-dpr(28px);
      padding: 0 18px;
      color: $fbc;
    }
    .btn-box{
      margin-top: 36px;
      padding: 0 18px;
      .btn{
        background-color: #76d672;
        color: #ffffff;
        text-align: center;
        @include font-dpr(28px);
        line-height: 70px;
        border-radius: 5px;
      }
    }
  }
  .select-enter-active,.select-leave-active{
    transition: all 0.3s ease;
  }
  .select-enter,.select-leave-to{
    transform: translate3d(100%, 0, 0);
  }
  .select-enter-to,.select-leave{
    transform: translate3d(0, 0, 0);
  }
</style>
